<script setup lang="ts">
import { getProduct } from "@/api/marketers/product";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import {
  addReddProducts,
  deleteReddProducts,
  getReddProducts,
  getReddProductsItemList,
  getReddProductsList,
  moveOutReddProducts,
  moveReddProducts,
  upReddProducts,
} from "@/api/marketers/reddProducts/reddProducts";
import { addDateRange } from "@/utils/ruoyi";
import type { FormInstance, TabsPaneContext } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import type { Product } from "@/types/index";
interface ReddProducts {
  reddProductsName: string;
  label: string;
  productId: number;
  product: Product;
  name: string;
  status: number;
  pageNum: number;
  pageSize: number;
  icon: string;
}
const searchRef2 = ref();
const loading = ref(false);
const moves = ref<number[]>([]);
const goodsList = ref([]);
const reddProducts = ref();
const drawer = ref(false);
const tableData = ref([]);
const radioModel = ref();
const dialogVisible = ref(false);
const formRef = ref();
const formRefMove = ref();
const activeName = ref("like");
const dialogtitle = ref();
const isButton = ref(false);
const dateRange = ref();
const total = ref(0);
const searchRef = ref();
const data = reactive({
  form: <ReddProducts>{},
  queryParams: <Product>{
    pageNum: 1,
    pageSize: 10,
  },
  queryParams2: <ReddProducts>{
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    reddProductsName: [{ required: true, message: "name不能为空", trigger: "blur" }],
    label: [{ required: true, message: "标签名称不能为空", trigger: "blur" }],
    icon: [{ required: true, message: "必须选择图标", trigger: "blur" }],
  },
});
const { form, rules, queryParams, queryParams2 } = toRefs(data);
//初始化
async function load() {
  loading.value = true;
  await getReddProductsList().then((response) => {
    reddProducts.value = response.data.data;
  });
  tab(activeName.value);
  loading.value = false;
}
// 添加推荐标签按钮
const addLabelButton = () => {
  dialogtitle.value = "新增推荐标签";
  dialogVisible.value = true;
  isButton.value = true;
};
//修改推荐标签按钮
const upLabelButton = async () => {
  dialogVisible.value = true;
  dialogtitle.value = "修改推荐标签";
  isButton.value = false;
  await getReddProducts(radioModel.value).then((response) => {
    form.value = response.data.data;
  });
};
// 删除推荐标签按钮;
const deleteLabelButton = async () => {
  await deleteReddProducts(radioModel.value);
  activeName.value = "like";
  load();
};
//提交按钮
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      if (isButton.value) {
        await addReddProducts(form.value);
      } else {
        await upReddProducts(form.value);
      }
      dialogVisible.value = false;
      load();
    }
  });
};
// 切换tab时触发
const tab = async (name: string) => {
  queryParams2.value.reddProductsName = name;
  activeName.value = name;
  getReddProductList();
};
//获取推荐商品列表
async function getReddProductList() {
  await getReddProductsItemList(queryParams2.value).then((response) => {
    tableData.value = response.data.rows;
    total.value = response.data.total;
  });
}
//查询商品按钮
const selectSumbit2 = () => {
  queryParams.value.pageNum = 1;
  tab(activeName.value);
};
// 预览图片数组
const imgPerview = (imgList: any) => {
  const imgs: string[] = [];
  imgList.forEach((item: any) => {
    imgs.push(item.url);
  });
  return imgs;
};
//移入商品按钮
const moveButton = () => {
  drawer.value = true;
  //获取商品列表
  getProductList();
};
// 提交移入按钮
const submitMove = async (item: any) => {
  await moveReddProducts(<ReddProducts>{
    reddProductsName: activeName.value,
    productId: item.productId,
  });
  drawer.value = false;
  load();
};
//移出商品
const moveOut = async (item: any) => {
  await moveOutReddProducts([item.reddProductsItemId]);
  load();
};
//批量移除
const batchMoveOut = async () => {
  await moveOutReddProducts(moves.value);
  load();
};
// 当选择项发生变化时会触发该事件
const handleSelectionChange = (newSelection: any[]) => {
  const data: number[] = [];
  newSelection.forEach((item) => {
    data.push(item.reddProductsItemId);
  });
  moves.value = data;
};
//获取商品列表
async function getProductList() {
  await getProduct(addDateRange(queryParams.value, dateRange.value)).then((response) => {
    goodsList.value = response.data.rows;
    total.value = response.data.total;
  });
}
//查询商品按钮
const selectSumbit = () => {
  queryParams2.value.pageNum = 1;
  getProductList();
};

// 表单重置
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 选择分页
const handleSizeChange = (val: number) => {
  queryParams2.value.pageSize = val;
  getReddProductList();
};
// 当前页
const handleCurrentChange = (val: number) => {
  queryParams2.value.pageNum = val;
  getReddProductList();
};
load();
</script>
<template>
  <!-- 查询商品 -->

  <el-form :inline="true" :model="queryParams2" ref="searchRef2" label-width="68px">
    <el-form-item prop="productId" label="商品id">
      <el-input
        v-model="queryParams2.productId"
        style="width: 240px"
        placeholder="商品id"
      ></el-input>
    </el-form-item>
    <el-form-item prop="name" label="商品名称">
      <el-input v-model="queryParams2.name" style="width: 240px" placeholder="商品名称">
        style="width: 240px"</el-input
      ></el-form-item
    >

    <el-form-item prop="status" label="状态">
      <el-select
        v-model="queryParams2.status"
        placeholder="请选择状态"
        style="width: 240px"
      >
        <el-option label="上架" :value="1" />
        <el-option label="下架" :value="0"
      /></el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="selectSumbit2">查询</el-button>
      <el-button type="primary" @click="resetForm(searchRef2), tab(activeName)" plain
        >重置</el-button
      >
    </el-form-item>
  </el-form>
  <div style="margin-bottom: 20px">
    <el-button @click="addLabelButton" size="small">新增标签</el-button>
    <el-button
      @click="upLabelButton"
      size="small"
      :disabled="radioModel == undefined ? true : false"
      >修改标签</el-button
    >
    <el-popconfirm
      :title="'确定要删除' + radioModel + '吗?'"
      @confirm="deleteLabelButton"
    >
      <template #reference>
        <el-button size="small" :disabled="radioModel == undefined ? true : false">
          删除标签
        </el-button>
      </template>
    </el-popconfirm>
  </div>
  <el-tabs v-model="activeName" @tab-change="tab">
    <el-tab-pane
      :label="item.label"
      :name="item.reddProductsName"
      v-for="item in reddProducts"
    >
      <template #label>
        <el-radio-group v-model="radioModel">
          <el-radio :value="item.reddProductsName" size="large" />
        </el-radio-group>
        <span>{{ item.label }}</span>
      </template>

      <el-container>
        <el-main>
          <el-button @click="moveButton">移入商品</el-button>
          <el-popconfirm :title="'确定要移出所有选中项吗？'" @confirm="batchMoveOut">
            <template #reference>
              <el-button :disabled="moves.length > 0 ? false : true">批量移出</el-button>
            </template>
          </el-popconfirm>

          <el-divider />

          <el-table
            :data="tableData"
            v-loading="loading"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column fixed type="selection" width="55" />
            <el-table-column label="商品ID" width="100">
              <template #default="scope">
                <span>{{ scope.row.product.productId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" width="180">
              <template #default="scope">
                <span>{{ scope.row.product.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="价格">
              <template #default="scope">
                <span>￥{{ scope.row.product.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="库存数量">
              <template #default="scope">
                <span>{{ scope.row.product.stock }}</span>
              </template>
            </el-table-column>
            <el-table-column label="所属分类">
              <template #default="scope">
                <span>{{ scope.row.product.categoryName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品详情">
              <template #default="scope">
                <span>{{ scope.row.product.description }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态">
              <template #default="scope">
                <el-tag :value="scope.row.product.status">{{
                  scope.row.product.status ? "上架" : "下架"
                }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
              <template #default="scope">
                <span>{{ scope.row.product.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="图片" width="180">
              <template #default="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.product.img"
                  :preview-src-list="imgPerview(scope.row.product.imgs)"
                  show-progress
                  fit="cover"
                  :preview-teleported="true"
                />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
              <template #default="scope">
                <el-popconfirm title="确定要删除吗？" @confirm="moveOut(scope.row)">
                  <template #reference>
                    <el-button link type="primary" icon="Delete">移出</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-affix position="bottom" :offset="40">
            <el-pagination
              style="display: flex; justify-content: center; margin-top: 20px"
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :page-sizes="[5, 10, 15, 25]"
              size="default"
              :background="true"
              layout="sizes, prev, pager, next,jumper,total"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-affix>
        </el-main>
      </el-container>
    </el-tab-pane>
  </el-tabs>
  <!-- 新增标签 -->
  <el-dialog
    v-model="dialogVisible"
    style="max-width: 600px"
    :title="dialogtitle"
    width="800"
    @close="resetForm(formRef)"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="formRef"
      label-width="auto"
      label-position="top"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="label" label="标签">
            <el-input v-model="form.label" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="reddProductsName" label="name">
            <el-input v-model="form.reddProductsName" style="width: 240px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="icon" label="图标">
            <el-select v-model="form.icon" placeholder="选择图标" style="width: 240px">
              <template #label>
                <span>
                  <component style="width: 20px; margin-right: 10px" :is="form.icon" />
                </span>
                <span> {{ form.icon }}</span>
              </template>
              <el-option
                v-for="item in ElementPlusIconsVue"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              >
                <component style="width: 20px" :is="item" />
                <span style="margin-left: 10px">{{ item.name }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button @click="submitForm(formRef)">确定</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
  <!-- 移入商品 -->
  <el-drawer v-model="drawer" title="移入商品" direction="btt" size="60%">
    <!-- 查询商品 -->
    <el-form :inline="true" :model="queryParams" ref="searchRef" label-width="68px">
      <el-form-item prop="productId" label="商品id">
        <el-input
          v-model="queryParams.productId"
          style="width: 240px"
          placeholder="商品id"
        ></el-input>
      </el-form-item>
      <el-form-item prop="name" label="商品名称">
        <el-input v-model="queryParams.name" style="width: 240px" placeholder="商品名称">
          style="width: 240px"</el-input
        ></el-form-item
      >

      <el-form-item prop="status" label="状态">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          style="width: 240px"
        >
          <el-option label="上架" :value="1" />
          <el-option label="下架" :value="0"
        /></el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="selectSumbit">查询</el-button>
        <el-button
          type="primary"
          @click="resetForm(searchRef), (dateRange = null), getProductList()"
          plain
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="goodsList">
      <el-table-column prop="productId" label="商品ID"></el-table-column>
      <el-table-column prop="name" label="商品名称" width="180" />
      <el-table-column prop="price" label="价格">
        <template #default="scope">
          <span>￥{{ scope.row.price }}</span>
        </template></el-table-column
      >
      <el-table-column prop="stock" label="库存数量"></el-table-column>
      <el-table-column prop="description" label="商品详情"> </el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-tag :value="scope.row.status">{{
            scope.row.status ? "上架" : "下架"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" fixed="right">
        <template #default="scope">
          <el-popconfirm title="确定要移入吗？" @confirm="submitMove(scope.row)">
            <template #reference>
              <el-button link type="primary">移入</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
</template>
<style lang="less" scoped></style>
